<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="head :: commonHead('个人信息')">

</head>

<body>

<div th:replace="head :: header"></div>

<div id="app" class="user_container clearfix">

    <div th:replace="content/personal/left :: body"></div>

    <!-- 右侧内容 -->
    <div class="right_boxwrap">
        <div class="user_right_box">
            <div class="user_right_box_title">
                <div class="user_right_box_title_l">
                    <em></em>
                    <h3>个人信息</h3>
                </div>
            </div>
            <form th:action="@{/personal/save}" method="post">
                <div style="margin-top: 10px;">
                    <input value="1" id="portrait_width" type="hidden">
                    <input value="1" id="portrait_height" type="hidden">
                    <input value="82" id="portrait_top" type="hidden">
                    <input value="73" id="portrait_left" type="hidden">
                    <input value="120" id="portrait_DropWidth" type="hidden">
                    <input value="120" id="portrait_DropHeight" type="hidden">

                    <input type="hidden" name="portrait" id="L_portrait" th:value="${user ne null ? user.portrait : ''}" autocomplete="off" class="">
                    <input type="hidden" id="L_old_portrait" th:value="${user ne null ? user.portrait : ''}" autocomplete="off" class="">
                    <div class="jcrop-div">
                        <div class="pic-btn">
                            <button type="button" id="L_portrait_upload" value="选择图片">选择图片</button>
                            <span class="x-red">*</span>
                        </div>
                        <div class="pic-img">
                            <img class="pictureWrap" th:if="${user ne null and user.portrait ne null}"
                                 th:src="${#request.getAttribute('uploadServer')} + ${user.portrait}" id="L_portrait_pic" style="height: 300px; width: 300px; display: block;"/>
                            <img class="pictureWrap" th:if="${user eq null or user.portrait eq null}"
                                 th:src="${#request.getAttribute('ctx') + '/static/front/img/default_portrait.png'}" id="L_portrait_pic" style="height: 300px; width: 300px; display: block;"/>
                        </div>
                        <div id="L_portrait_preview_pane" class="preview-pane1">
                            <div class="preview-container w180h180">
                                <img id="L_portrait_jcrop_preview" th:src="${#request.getAttribute('ctx') + '/static/front/img/default_portrait.png'}" class="jcrop-preview pictureSmall"/>
                            </div>
                        </div>
                    </div>
                    <button type="button" id="L_portrait_jcrop_destroy" style="display: none;"></button>
                </div>
                <div class="user_info">

                    <div class="middle">
                        <div class="middle_box">
                            <div class="middle_box_title">
                                <h3>基本信息</h3>
                            </div>
                            <div class="middle_box_con">
                                <div class="table">
                                    <div class="left">
                                        姓名
                                    </div>
                                    <div class="center">
                                        <input type="text" name="name" id="name" th:value="${user.name}" placeholder="添加真实姓名, 方便我们为您提供更好的服务" onclick="return checkname()" onchange="return checkname()"/>
                                    </div>
                                    <div class="right name_warning_2 is-hidden">
                                        <i class="iconfont icon-gantanhao"></i>
                                        <span>姓名不能少于2个汉字或超过6个汉字</span>
                                    </div>
                                    <div class="right correct name_warning_3 is-hidden">
                                        <i class="iconfont icon-d"></i>
                                    </div>
                                </div>
                                <div class="table">
                                    <div class="left">
                                        *昵称
                                    </div>
                                    <div class="center">
                                        <input type="text" name="nickname" id="nickName" th:value="${user.nickname}" placeholder="昵称为2-6个汉字或12个字符" onclick="return checkNickName()" onchange="return checkNickName()"/>
                                    </div>
                                    <div class="right nickName_warning_1">
                                        <i class="iconfont icon-gantanhao"></i>
                                        <span>昵称不能为空</span>
                                    </div>
                                    <div class="right nickName_warning_2">
                                        <i class="iconfont icon-gantanhao"></i>
                                        <span>昵称为2-6个汉字或12个字符</span>
                                    </div>
                                    <div class="right correct nickName_warning_3">
                                        <i class="iconfont icon-d"></i>
                                    </div>
                                </div>
                                <div class="table">
                                    <div class="left" style="margin-right: 48px;">
                                        *性别
                                    </div>
                                    <div class="sex" style="margin-right:75px;">
                                        <label style="margin-right: 75px;">
                                            <input name="gender" type="radio" value="1" th:checked="${user.gender eq 1}"/>
                                            <span style="display: inline-block;margin-left: 30px;">男</span>
                                        </label>
                                        <label>
                                            <input name="gender" type="radio" value="0" th:checked="${user.gender eq 0}"/>
                                            <span style="display: inline-block;margin-left: 30px;">女</span>
                                        </label>
                                    </div>
                                    <div class="right gender_warning_1">
                                        <i class="iconfont icon-gantanhao"></i>
                                        <span>请选择性别</span>
                                    </div>
                                    <div class="right correct gender_warning_2">
                                        <i class="iconfont icon-d"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="middle_box">
                            <div class="middle_box_title">
                                <h3>联系方式</h3>
                            </div>
                            <div class="middle_box_con">
                                <div class="table">
                                    <div class="left">
                                        *手机
                                    </div>
                                    <div class="center">
                                        <input type="text" name="mobile" id="phone" th:value="${user.mobile}" readonly placeholder="必填项"/>
                                    </div>
                                </div>
                                <div class="table">
                                    <div class="left">
                                        *邮箱
                                    </div>
                                    <div class="center">
                                        <input type="email" name="email" id="email" th:value="${user.email}" placeholder="为方便给您发送最终版本的视频内容" onclick="return checkEmail()" onchange="return checkEmail()" />
                                    </div>
                                    <div class="right email_warning_2">
                                        <i class="iconfont icon-gantanhao"></i>
                                        <span>邮箱错误</span>
                                    </div>
                                    <div class="right correct email_warning_3">
                                        <i class="iconfont icon-d"></i>
                                    </div>
                                </div>
                                <div class="table">
                                    <div class="left">
                                        *微信
                                    </div>
                                    <div class="center">
                                        <input type="text" name="wechat" id="wx" th:value="${user.wechat}" placeholder="方便客服与您沟通剧本和作品的相关事宜" onclick="return checkWx()" onchange="return checkWx()"/>
                                    </div>
                                    <div class="right wx_warning_1">
                                        <i class="iconfont icon-gantanhao"></i>
                                        <span>微信不能为空</span>
                                    </div>
                                    <div class="right correct wx_warning_2">
                                        <i class="iconfont icon-d"></i>
                                    </div>
                                </div>
                                <div class="table">
                                    <div class="left" style="padding-left:14px;">
                                        QQ
                                    </div>
                                    <div class="center">
                                        <input type="text" name="qq" id="qq" th:value="${user.qq}" placeholder=""/>
                                    </div>
                                    <div class="right"></div>
                                </div>
                            </div>
                        </div>

                        <div class="middle_box">
                            <div class="middle_box_title">
                                <h3>其他备注</h3>
                            </div>
                            <div class="middle_box_con">
                                <div class="table">
                                    <div class="left">
                                        期望风格
                                    </div>
                                    <div class="center select_c">
                                        <select class="select" name="expect" style="width: 325px; height: 48px; background: white;">
                                            <option class="option" value="">选择期望风格</option>
                                            <option class="option" th:each="item, index:${dictionaryList}" th:label="${item.name}" th:value="${item.value}" th:selected="${item.value == user.expect}"></option>
                                        </select>
                                        <!--/*<div class="select">
                                            <span></span><em style="font-style:normal; color: #a0a0a0;">▼</em>
                                        </div>
                                        <ul class="option">
                                            <li th:each="item, index:${dictionaryList}" th:text="${item.name}" th:attr="data-item-value=${item.value}"></li>
                                        </ul>*/-->
                                    </div>
                                </div>
                                <div class="table">
                                    <div class="left">
                                        制作要求
                                    </div>
                                    <div class="require">
                                        <input class="text" type="hidden" name="requirement" id="requirement" th:value="${user.requirement}" v-model="form.requirement" readonly="readonly" placeholder="上传附件名称"/>
                                        <input class="text" type="text" th:value="${user.requirement ne null ? user.requirement.substring(user.requirement.lastIndexOf('/') + 1) : ''}" readonly="readonly" placeholder="上传附件名称"/>

                                        <!-- 加载kindeditor -->
                                        <input style="display: none; vertical-align: middle;" class="cus-upload-file-btn" data-val-target="requirement" type="file" value="0" id="uploadFile"/>
                                    </div>
                                    <div class="right" style=" width: 268px; display: inline-block;">
                                        <div class="right_warning_1">
                                            <i class="iconfont icon-iconfontwenhao1" style="color: #a0a0a0;"></i>
                                            <span id="requirement-tip" style="color: #a0a0a0; font-size:14px; width: 236px;">请输入word、Excel等格式文件，要求在2M以内</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="bottom">
                        <input type="button" id="save" value="保存"/>
                    </div>

                </div>
            </form>
        </div>
    </div>
</div>

<div th:replace="foot :: body"></div>

</body>

<link rel="stylesheet" th:href="${#request.getAttribute('ctx') + '/static/common/kindeditor/themes/default/default.css'}">
<link rel="stylesheet" th:href="${#request.getAttribute('ctx') + '/static/common/Jcrop-0.9.12/jquery.Jcrop.min.css'}">

<script type="text/javascript" th:src="${#request.getAttribute('ctx') + '/static/common/kindeditor/kindeditor-all-min.js'}"></script>
<!-- Jcrop -->
<script type="text/javascript" th:src="${#request.getAttribute('ctx') + '/static/common/Jcrop-0.9.12/jquery.Jcrop.min.js'}"></script>

<script th:src="${#request.getAttribute('ctx') + '/static/front/js/home.js'}" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" th:src="${#request.getAttribute('ctx') + '/static/common/uploadify/swfobject.js'}"></script>
<script type="text/javascript" th:src="${#request.getAttribute('ctx') + '/static/common/uploadify/jquery.uploadify.v2.1.4.min.js'}"></script>

<script th:inline="javascript">
    $(function() {
        activeLeft('personal-edit');

        if (!![[${#request.getSession().getAttribute('error')}]]) {
            ELEMENT.Message.info([[${#request.getSession().getAttribute('error')}]]);
        }

        // 头像剪裁
        webImageUpload('L_portrait_upload', 'temp&cutImg=true', calTitleImg,
            '#L_portrait', '#L_portrait_pic', '#L_portrait_preview_pane', '#L_portrait_jcrop_preview', '#L_portrait_jcrop_destroy', 1 / 1);

        // 判断浏览器是否启用flash
        if(!isUseFlash()) {
            $('#requirement-tip').text('您未安装flash, 或安装未开启, 无法上传');
        }

        $("#uploadFile").uploadify({
            'uploader' : ctx + '/static/common/uploadify/uploadify.swf', //上传控件的主体文件，flash控件  默认值='uploadify.swf'
            'script' : uploadServer + '/image/uploadfile?',
            'scriptData':{"param":"courseKpoint/pdf","width":"128","height":"78"},
            'queueID' : 'fileQueue', //文件队列ID
            'fileDataName' : 'fileupload', //您的文件在上传服务器脚本阵列的名称
            'auto' : true, //选定文件后是否自动上传
            'multi' :false, //是否允许同时上传多文件
            'hideButton' : false,//上传按钮的隐藏
            'buttonText' : 'Browse',//默认按钮的名字
            'buttonImg' : '/static/common/uploadify/liulan.png',//使用图片按钮，设定图片的路径即可
            'width' : 105,
            'simUploadLimit' : 3,//多文件上传时，同时上传文件数目限制
            'sizeLimit' : 51200000,//控制上传文件的大小
            'queueSizeLimit' : 3,//限制在一次队列中的次数（可选定几个文件）
            'fileDesc' : '支持格式:pdf',
            'fileExt'  : '*.pdf;*.xlsx;',
            'cancelImg' : '/static/common/uploadify/cancel.png',
            onSelect : function(event, queueID, fileObj) {
                if (fileObj.size > 51200000) {
                    alert('文件太大最大限制51200kb');
                    return false;
                }
            },
            onComplete : function(event, queueID, fileObj, response, data) {
                //updateFunctionImageDelete("videourl","swf");
                //返回地址不能为空
                if(response==null||response==""){
                    ELEMENT.Message.error('上传失败请刷新重试');
                    return false;
                }

                $("#requirement").val(response);
                $("#requirement").next().val(response.substr(response.lastIndexOf('/') + 1));
                ELEMENT.Message.success('附件上传成功');
            },
            onError : function(event, queueID, fileObj, errorObj) {
                ELEMENT.Message.error(fileObj.name + '上传失败');
            }
        });

        $('#save').click(function () {
            // 先剪切头像
            var _self = this;
            var portraitPath = $("#L_portrait").val();
            var portraitOldPath = $('#L_old_portrait').val();
            if (portraitPath == null || portraitPath == '') {
                ELEMENT.Message.error('请上传头像');
            } else {
                if (portraitPath != portraitOldPath) {
                    var params = "photoPath=" + portraitPath
                        + "&txt_width=" + $("#portrait_width").val()
                        + "&txt_height=" + $("#portrait_height").val()
                        + "&txt_top=" + $("#portrait_top").val()
                        + "&txt_left=" + $("#portrait_left").val()
                        + "&txt_DropWidth=" + $("#portrait_DropWidth").val()
                        + "&txt_DropHeight=" + $("#portrait_DropHeight").val();
                    $.ajax({
                        url: uploadServer + "/image/saveface",
                        type: 'get',
                        async: false,
                        data: params,
                        dataType: 'jsonp',//here
                        jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
                        jsonpCallback: "savePortrait",
                        success: function (json) {
                            if (json.error != 0) {
                                ELEMENT.Message.error(json.message);
                                return;
                            }
                            $('#L_portrait').val(json.src);
                            if (userValidate()) {
                                _self.form.submit();
                            }
                        },
                        error: function (e) {
                            ELEMENT.Message.error('图片上传失败,请上传宽高均小于900像素,小于200kb的图片');
                        }
                    });
                }
                else {
                    if (userValidate()) {
                        _self.form.submit();
                    }
                }
            }
        })
    });

</script>

</html>